import { NavBar, DatePicker } from 'antd-mobile'
import './index.scss'
import { useState,useMemo,useEffect } from 'react'
import { useSelector } from 'react-redux'
import classNames from 'classnames'
import dayjs from 'dayjs'
import _ from 'lodash'
import DailyBill from '@/component/DailyBill'
const Month = () => {
  const [visible,setVisible] = useState(false)
  const [currentDate,setCurrentDate]= useState(()=> dayjs(new Date()).format('YYYY|MM'))
  const [currentList,setCurrentList] = useState([])
  // const [pay,setPay] = useState(0)
  // const [inCome,setIncome] = useState(0)
  const onConfirm = (val)=>{
    const dateSelect = dayjs(val).format('YYYY|MM')
    setCurrentDate(dateSelect)
    // const daySelect = dayjs(val).format('YYYY-MM-DD')
    setCurrentList(monthBill[dateSelect])
    // setCurrentDayList(dayBill[daySelect])
    // console.log(dayBill);
    // console.log(daySelect);
    // console.log(dayBill[daySelect]);
  //   if(currentList){
  //      const payAll = payList.reduce((sum,item)=>sum+item.money,0)
  //  const comeAll = comeList.reduce((sum,item)=>sum+item.money,0)
  //  setPay(payAll)
  //  setIncome(comeAll)
  //   }
  }
  const billLsit = useSelector(state => state.bill.billList)
  // 二次处理
  //按月分组
  const monthBill = useMemo(()=>{
    return _.groupBy(billLsit,(item)=>dayjs(item.date).format('YYYY|MM'))
  },[billLsit])
  // //按日分组
  //  const dayBill = useMemo(()=>{
  //   return _.groupBy(billLsit,(item)=>dayjs(item.date).format('YYYY-MM-DD'))
  // },[billLsit])
  // const [currentDayList,setCurrentDayList] = useState([])
  // const payList = useMemo(()=>{
  //   return currentList?.filter(item=>item.type === 'pay')
  // },[currentList])
  // const comeList = useMemo(()=>{
  //   return currentList?.filter(item=>item.type === 'income')
  // },[currentList])

const currentMoney = useMemo(()=>{
  const pay = currentList?.filter(item=>item.type === 'pay').reduce((sum,item)=>sum+item.money,0)
  const income = currentList?.filter(item=>item.type === 'income').reduce((sum,item)=>sum+item.money,0)
  return {
    pay:pay || 0,
    income:income||0,
    leave:(pay+income) || 0
  }
},[currentList])
useEffect(()=>{
  // console.log('currentDate',currentDate);
  const nowDate = dayjs().format('YYYY|MM')
  console.log(nowDate);
  monthBill[nowDate] && setCurrentList(monthBill[nowDate])
},[monthBill])

// useEffect(()=>{
//     //当前日数组
//   const nowDay = dayjs().format('YYYY-MM-DD')
//   dayBill[nowDay] && setCurrentDayList(dayBill[nowDay])
// },[dayBill])
  return (
    <div className="monthlyBill">
      <NavBar className="nav" backArrow={false}>
        月度收支
      </NavBar>
      <div className="content">
        <div className="header">
          {/* 时间切换区域 */}
          <div className="date" onClick={()=>setVisible(true)}>
            <span className="text">
              {currentDate}月账单
            </span>
            <span className={classNames('arrow', visible && 'expand')}></span>
          </div>
          {/* 统计区域 */}
          <div className='twoLineOverview'>
            <div className="item">
              <span className="money">{currentMoney.pay.toFixed(2)}</span>
              <span className="type">支出</span>
            </div>
            <div className="item">
              <span className="money">{currentMoney.income.toFixed(2)}</span>
              <span className="type">收入</span>
            </div>
            <div className="item">
              <span className="money">{currentMoney.leave.toFixed(2)}</span>
              <span className="type">结余</span>
            </div>
          </div>
          
          {/* 时间选择器 */}
          <DatePicker
            className="kaDate"
            title="记账日期"
            precision="month"
            visible={visible}
            max={new Date()}
            onConfirm={onConfirm}
            onCancel={()=>{
              setVisible(false)
            }}
            onClose={() => {
          setVisible(false)
        }}
          />
        
        </div>
         {currentList?.map(item=><DailyBill key={item.id} item={item}/>)}
      </div>
    </div >
  )
}

export default Month